<template>

  <div class="center">
     <x-header :left-options="{showBack: false}">思宝贝-遥控车</x-header>
<group title="画面">
<img  style="width:400px;margin-top:10px;" src='https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2408226829,3011915410&fm=200&gp=0.jpg'>

</group>
<group >
 <cell title="音量" primary="content">
<div>
<range v-model="data1" :min="1" :max="100" style="width:150px;top:15px;" ></range>  <x-button mini type="warn">静音</x-button>
</div>
</cell>

   <flexbox style="margin-bottom:10px;">
        <flexbox-item>
          <x-button type="default" style="height:30px;width:100px;font-size:14px">全屏</x-button>
        </flexbox-item>
        <flexbox-item>
          <x-button type="primary" style="height:30px;width:100px;font-size:14px">拍照</x-button>
        </flexbox-item>
        <flexbox-item>
          <x-button type="warn" style="height:30px;width:100px;font-size:14px">录像</x-button>
        </flexbox-item>
      </flexbox>


 <grid :cols="2">
      <grid-item >
        小车方向
        <img style="height:150px" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1521293753703&di=010f206aa3d13c1665cf9c491d98acf9&imgtype=0&src=http%3A%2F%2Fm.qqzhi.com%2Fupload%2Fimg_3_1818606824D425066071_23.jpg">
      </grid-item>
      <grid-item >
        摄像头方向
<img style="height:150px" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1521293753703&di=010f206aa3d13c1665cf9c491d98acf9&imgtype=0&src=http%3A%2F%2Fm.qqzhi.com%2Fupload%2Fimg_3_1818606824D425066071_23.jpg">
      </grid-item>
    </grid>

</group>

<tabbar>

      <tabbar-item selected>
        <img slot="icon" src="http://www.iconpng.com/png/windows8_icons2/car.png">
        <span slot="label">遥控车</span>
      </tabbar-item>
      <tabbar-item badge="2" >
        <img slot="icon" src="http://www.iconpng.com/png/miui-jeans/gallery.png">
        <span slot="label">图片</span>
      </tabbar-item>
      <tabbar-item badge="10" >
        <img slot="icon" src="http://www.iconpng.com/png/miui-mylove/videoplayer.png">
        <span slot="label">小视频</span>
      </tabbar-item>
      <tabbar-item show-dot>
        <img slot="icon" src="http://www.iconpng.com/png/freebie-blog/community.png">
        <span slot="label">社区</span>
      </tabbar-item>
      <tabbar-item >
        <img slot="icon" src="http://www.iconpng.com/png/miui-crimp/settings.png">
        <span slot="label">我的</span>
      </tabbar-item>
    </tabbar>
  </div>
</template>

<script>

import { Tabbar, TabbarItem, XHeader,Panel, Radio,Group,Divider,Card,Range,Cell, XButton} from 'vux'
import { Grid, GridItem,Flexbox, FlexboxItem } from 'vux'
export default {
  components: {
     Grid, GridItem,Tabbar, TabbarItem, XHeader,Panel, Radio,Group,Divider,Card,Range,Cell, XButton,Flexbox, FlexboxItem
  },
  methods: {
    onImgError (item, $event) {
      console.log(item, $event)
    }
  },
  data () {
    return {
      data1:50,
      type: '5',
      list: [{
        src: 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2777585458,2597923313&fm=200&gp=0.jpg',
        fallbackSrc: 'http://placeholder.qiniudn.com/60x60/3cc51f/ffffff',
        title: '我家宝贝',
        desc: '我家宝贝已经20天了，大家来看他萌萌的样子',
        url: '/component/cell',
        meta: {
          source: '用户:terrydash',
          date: '发帖时间:'+new Date().toLocaleDateString(),
          other:'点赞:10 '
        }
      }, {
        src: 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2777585458,2597923313&fm=200&gp=0.jpg',
        fallbackSrc: 'http://placeholder.qiniudn.com/60x60/3cc51f/ffffff',
        title: '我家宝贝',
        desc: '我家宝贝已经20天了，大家来看他萌萌的样子',
        url: '/component/cell',
        meta: {
          source: '用户:terrydash',
          date: '发帖时间:'+new Date().toLocaleDateString(),
        }
      },{
        src: 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2777585458,2597923313&fm=200&gp=0.jpg',
        fallbackSrc: 'http://placeholder.qiniudn.com/60x60/3cc51f/ffffff',
        title: '我家宝贝',
        desc: '我家宝贝已经20天了，大家来看他萌萌的样子',
        url: '/component/cell',
        meta: {
          source: '用户:terrydash',
          date: '发帖时间:'+new Date().toLocaleDateString(),
        }
      },
      {
        src: 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2777585458,2597923313&fm=200&gp=0.jpg',
        fallbackSrc: 'http://placeholder.qiniudn.com/60x60/3cc51f/ffffff',
        title: '我家宝贝',
        desc: '我家宝贝已经20天了，大家来看他萌萌的样子',
        url: '/component/cell',
        meta: {
          source: '用户:terrydash',
          date: '发帖时间:'+new Date().toLocaleDateString(),
        }
      },{
        src: 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2777585458,2597923313&fm=200&gp=0.jpg',
        fallbackSrc: 'http://placeholder.qiniudn.com/60x60/3cc51f/ffffff',
        title: '我家宝贝',
        desc: '我家宝贝已经20天了，大家来看他萌萌的样子',
        url: '/component/cell',
        meta: {
          source: '用户:terrydash',
          date: '发帖时间:'+new Date().toLocaleDateString(),
        }
      }
      ],
      footer: {
        title: '更多新闻',
        url: 'http://vux.li'
      }
    }
  }
};
</script>

<style>

.center {
  text-align: center;
}

</style>
